<template>
	<div>
		<ol>
			<li>
				<label>描述</label>
				<input type="text" v-model.lazy.trim='memo' />
			</li>
			<li>
				<label>描述</label>
				<input type="text" v-model.lazy.trim='hot' />
			</li>
			<li>
				<label>描述</label>
				<input type="text" v-model.lazy.trim='type' />
			</li>
			<li>
				<label>图片</label>
				<!-- 将上传框的所有信息赋值给pic变量 -->
				<input type="file" ref="pic" />
			</li>
			<li>
				<router-link to="/admin">返回</router-link>
				<button @click="addpic()" >上传</button>
			</li>
		</ol>
	</div>
</template>

<script>
export default{
	name:'Banner',
	data(){
		return{
			memo:'购书中心首页头部轮播图片',
			hot:1,
			type:1,
			pic:'',
		}
	},
	methods:{
		// 提交轮播数据
		addpic(){
			// this.$refs指向被ref属性绑定的标签元素
			// 上传框的value属性是files，被上传的文件具体信息
			// this.$refs.pic.files所上传的文件的完整数据
			// console.log(this.$refs.pic.files);
			let fs = this.$refs.pic.files;		//获取的是图片数据
			// 判断是否有上传图片【有图片上传且图片是存在的】
			if( fs.length > 0 && fs[0] != '' &&this.memo != '' && this.hot != '' && this.type != '' ){
				// 创建一个空的表单对象数据
				let fd = new FormData();
				// 将需要打包的数据，append方式提交给对象
				fd.append( 'memo' , this.memo );		//将描述的值添加到表单对象中打包
				fd.append( 'hot' , this.hot );			//热度
				fd.append( 'type' , this.type );		//类型
				fd.append( 'pic' , fs[0] );		//图片
				// 发起post请求
				/*
					请求地址			http://127.0.0.1:8090/api/adm/hot/addHot
					提交数据
					表头配置			header:{ 'Content-Type' : '' }
				*/
				// console.log(fd);
				this.axios.post('/api/adm/hot/addHot' , fd,{
					header : { 'Content-Type' : 'multipart/form-data' }
				}).then( (res)=>{
					console.log(res);
					if(res.data.code === 200){
						// 请求成功后，返回查询页
						this.$router.push('/admin/typeEdit');
					}else{
						alert(res.data.msg);	//msg失败之后的返回信息
					}
				}).catch( (error)=>{
					console.log(error);
				})
				
			}
		}
	}
}
</script>

<style>
</style>
